<template>
  <a-row style="margin-left: 14px">
    <!--物资大类树展示-->
    <a-col :span="12">
      <a-card style="overflow-y: scroll;" :style="{height: windowHeight-260+'px'}" :bordered="false">
        <template>
          <a-button @click="handleAdd(1)" type="primary" style="margin-right: 8px">添加一级</a-button>
          <a-button @click="handleAdd(2)" style="margin-right: 8px" type="primary">添加子级</a-button>
        </template>
        <vxe-table
          resizable
          highlight-current-row
          row-id="id"
          ref="xTree"
          size="mini"
          @current-change="currentChangeEvent"
          style="margin-top: 8px"
          :checkbox-config="{labelField: 'name'}"
          :tree-config="{children: 'children', line: true, iconOpen: 'fa fa-minus-square-o', iconClose: 'fa fa-plus-square-o'}"
          :keyboard-config="{isArrow: true, isEnter: true}"
          :data="mdmMatTree">
          <vxe-table-column  tree-node>
            <template v-slot="{ row }">
              <span>
                <template v-if="row.children && row.children.length">
                  <i class="tree-node-icon fa" :class="$refs.xTree.isTreeExpandByRow(row) ? 'fa-folder-open-o' : 'fa-folder-o'"></i>
                </template>
                <template v-else>
                  <i class="tree-node-icon fa fa-file-o"></i>
                </template>
                <span>{{ row.name }}</span>
              </span>
            </template>
          </vxe-table-column>
          <!--<vxe-table-column field="code" title="编码"></vxe-table-column>-->
          <!--<vxe-table-column field="alias" title="别名"></vxe-table-column>-->
        </vxe-table>
      </a-card>
    </a-col>
    <a-col :span="12">
      <!--添加物资大类-->
      <mdm-mat-cat-module ref="matRef" @ok="getTreeList"></mdm-mat-cat-module>
    </a-col>
  </a-row>

</template>

<script>
  import { getAction } from '../../../api/manage'
  import MdmMatCatModule from '@/views/mdm/mat/modules/MdmMatCatModule.vue'
  import ACol from 'ant-design-vue/es/grid/Col'
  export default {
    components: {
      ACol,
      MdmMatCatModule
    },
    data () {
      return {
        mdmMatTree: [],
        //实时屏幕高度
        windowHeight: document.documentElement.clientHeight,
        //选中行数据
        mdmMat:null,
        url:{
          /*获取物资大类树*/
          treeList:'/mdm/matCat/treeList'
        }
      }
    },
    created () {
      this.getTreeList()
    },
    methods:{
      /**
       * @author pqz
       * @description 获取物资大类树形结构
       */
      getTreeList(){
        getAction(this.url.treeList,{}).then((res)=>{
          if (res.success){
            this.mdmMatTree = res.result;
          } else {
            this.$message.warning("获取物资大类树失败");
          }
        })
      },

      /**
       * @author pqz
       * @description 添加方法
       **/
      handleAdd(sign){
        if ('1'==sign){
          //添加一级情况
          this.$refs.matRef.openAdd(null,'添加一级',null)
        }else if('2' == sign){
          //添加子级情况
          if (null == this.mdmMat){
            this.$message.warning('请选择一行数据');
            return false
          } else {
            console.log(this.mdmMat,"添加方法开始")
            this.$refs.matRef.openAdd(this.mdmMat.id,"添加子级",this.mdmMat.name)
          }
        }
      },

      /**
       * @author pqz
       * @description 单击每行树数据事件
       **/
      currentChangeEvent ({ row }) {
        this.mdmMat = row;
        this.$refs.matRef.setValue(row)
      },
    }
  }
</script>

<style scoped lang="less">
  .tree-node-icon {
    width: 16px;
    text-align: center;
  }
</style>